<script setup lang="ts">
import { computed } from 'vue';

interface Props{
  modelValue?:boolean,
  size?:'small'|'medium'|'large'
}
const props = withDefaults(defineProps<Props>(),{
  modelValue:false,
  size:'small'
})
const emit = defineEmits<{
  (e: 'update:modelValue', val: any): void
}>()
const fontSize=computed(() =>{
  let c=''
  switch(props.size){
    case 'small':
      c='text-sm'
      break
    case 'medium':
      c='text-6xl'
      break
    case 'large':
      c='text-8xl'
      break
  }
  return c
})
</script>

<template>
  <div>
    <div class="iconfont icon-switch-on" :class="[fontSize]" v-show="props.modelValue" @click="emit('update:modelValue',false)"
      w:text="red-500"
    ></div>
    <div class="iconfont icon-switch-off" :class="[fontSize]" v-show="!props.modelValue" @click="emit('update:modelValue',true)"
      w:text="gray-400"
    ></div>
  </div>
</template>

<style scoped lang="scss">

</style>